<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A simple jQuery image cropping plugin.">
  <meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, image cropping, front-end, frontend, web development">
  <meta name="author" content="Fengyuan Chen">
  <title>Cropper</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/cropper.min.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <!-- header -->
  <header class="navbar navbar-static-top docs-navbar-top" id="top">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="./">Cropper</a>
      </div>
      <nav class="collapse navbar-collapse" role="navigation">
        <ul class="nav navbar-nav">
          <li><a href="#overview">Overview</a></li>
          <li><a href="#features">Features</a></li>
          <li><a href="#getting-started">Getting started</a></li>
          <li><a href="#examples">Examples</a></li>
          <li><a href="https://github.com/fengyuanchen/cropper">GitHub</a></li>
          <li><a href="https://github.com/fengyuanchen/cropper/blob/master/LICENSE">License</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="http://chenfengyuan.com">About</a></li>
          <li><a href="https://fengyuanchen.github.io/">More</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Banner -->
  <div class="jumbotron docs-jumbotron">
    <div class="container">
      <h1>Cropper</h1>
      <p>A simple jQuery image cropping plugin.</p>
      <p>
        <a class="btn btn-primary" href="https://github.com/fengyuanchen/cropper/archive/master.zip">Download</a>
        <a class="btn btn-primary" href="https://github.com/fengyuanchen/cropper">View on GitHub</a>
      </p>
    </div>
  </div>

  <!-- content -->

  <!-- Overview -->
  <div class="container docs-overview">
    <h1 id="overview">Overview</h1>
    <div class="row">
      <div class="col-md-9">
        <h3>Image:</h3>
        <div class="img-container"><img src="img/picture-1.jpg"></div>
        <div class="docs-toolbar">
          <div class="btn-group">
            <button class="btn btn-primary" data-method="zoom" data-option="0.1" type="button" title="Zoom In">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, 0.1)">
                <span class="glyphicon glyphicon-zoom-in"></span>
              </span>
            </button>
            <button class="btn btn-primary" data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;zoom&quot;, -0.1)">
                <span class="glyphicon glyphicon-zoom-out"></span>
              </span>
            </button>
            <button class="btn btn-primary" data-method="rotate" data-option="-90" type="button" title="Rotate Left">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, -90)">
                <span class="glyphicon glyphicon-share-alt docs-flip-horizontal"></span>
              </span>
            </button>
            <button class="btn btn-primary" data-method="rotate" data-option="90" type="button" title="Rotate Right">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;rotate&quot;, 90)">
                <span class="glyphicon glyphicon-share-alt"></span>
              </span>
            </button>
            <button class="btn btn-primary" data-method="setDragMode" data-option="move" type="button" title="Move">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
                <span class="glyphicon glyphicon-move"></span>
              </span>
            </button>
            <button class="btn btn-primary" data-method="setDragMode" data-option="crop" type="button" title="Crop">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;setDragMode&quot;, &quot;crop&quot;)">
                <span class="glyphicon glyphicon-plus"></span>
              </span>
            </button>
            <button class="btn btn-primary" data-method="clear" type="button" title="Clear">
              <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper(&quot;clear&quot;)">
                <span class="glyphicon glyphicon-remove"></span>
              </span>
            </button>
            <label class="btn btn-primary" for="inputImage" title="Upload image file">
              <input class="hide" id="inputImage" name="file" type="file" accept="image/*">
              <span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
                <span class="glyphicon glyphicon-upload"></span>
              </span>
            </label>
            <!-- <button class="btn btn-primary" id="download" type="button" title="Download cropped image">
              <span class="docs-tooltip" data-toggle="tooltip" title="Export image with &quot;getDataURL&quot;">
                <span class="glyphicon glyphicon-download"></span>
              </span>
            </button> -->
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <h3>Preview:</h3>
        <div class="row">
          <div class="col-md-8">
            <div class="img-preview img-preview-sm"></div>
          </div>
          <div class="col-md-4">
            <div class="img-preview img-preview-xs"></div>
          </div>
        </div>
        <hr>
        <h3>Data:</h3>
        <div class="docs-data">
          <div class="input-group">
            <label class="input-group-addon" for="dataX">X</label>
            <input class="form-control" id="dataX" type="text" placeholder="x">
            <span class="input-group-addon">px</span>
          </div>
          <div class="input-group">
            <label class="input-group-addon" for="dataY">Y</label>
            <input class="form-control" id="dataY" type="text" placeholder="y">
            <span class="input-group-addon">px</span>
          </div>
          <div class="input-group">
            <label class="input-group-addon" for="dataWidth">Width</label>
            <input class="form-control" id="dataWidth" type="text" placeholder="width">
            <span class="input-group-addon">px</span>
          </div>
          <div class="input-group">
            <label class="input-group-addon" for="dataHeight">Height</label>
            <input class="form-control" id="dataHeight" type="text" placeholder="height">
            <span class="input-group-addon">px</span>
          </div>
          <!-- <div class="input-group">
            <label class="input-group-addon" for="dataRotate">Rotate</label>
            <input class="form-control" id="dataRotate" type="text" placeholder="rotate">
            <span class="input-group-addon">deg</span>
          </div> -->
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-9">
        <div class="docs-btn-group">
          <h3>Methods:</h3>
          <div class="button-group">
            <button class="btn btn-warning" id="reset" data-method="reset" data-toggle="tooltip" type="button" title="$().cropper(&quot;reset&quot;)">Reset</button>
            <button class="btn btn-warning" id="reset2" data-method="reset" data-option="true" data-toggle="tooltip" type="button" title="$().cropper(&quot;reset&quot;, true)">Reset (deep)</button>
            <button class="btn btn-success" id="enable" data-method="enable" type="button">Enable</button>
            <button class="btn btn-warning" id="disable" data-method="disable" type="button">Disable</button>
            <button class="btn btn-primary" id="clear" data-method="clear" type="button">Clear</button>
            <button class="btn btn-danger" id="destroy" data-method="destroy" type="button">Destroy</button>
            <button class="btn btn-info" id="freeRatio" data-method="setAspectRatio" data-option="auto" data-toggle="tooltip" type="button" title="$().cropper(&quot;setAspectRatio&quot;, &quot;auto&quot;)">Free Ratio</button>
            <button class="btn btn-primary" id="setData" type="button" title="Set with the following data">Set Data</button>
          </div>

          <div class="row">
            <div class="col-sm-6 col-md-3">
              <div class="input-group">
                <span class="input-group-addon">X</span>
                <input class="form-control" id="setDataX" type="number" value="550">
                <span class="input-group-addon">px</span>
              </div>
            </div>
            <div class="col-sm-6 col-md-3">
              <div class="input-group">
                <span class="input-group-addon">Y</span>
                <input class="form-control" id="setDataY" type="number" value="100">
                <span class="input-group-addon">px</span>
              </div>
            </div>
            <div class="col-sm-6 col-md-3">
              <div class="input-group">
                <span class="input-group-addon">Width</span>
                <input class="form-control" id="setDataWidth" type="number" value="480">
                <span class="input-group-addon">px</span>
              </div>
            </div>
            <div class="col-sm-6 col-md-3">
              <div class="input-group">
                <span class="input-group-addon">Height</span>
                <input class="form-control" id="setDataHeight" type="number" value="270">
                <span class="input-group-addon">px</span>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-6 col-md-6">
              <div class="input-group">
                <span class="input-group-btn">
                  <button class="btn btn-primary" id="zoom" type="button">Zoom</button>
                </span>
                <input class="form-control" id="zoomWith" type="number" value="0.5">
              </div>
            </div>
            <div class="col-sm-6 col-md-6">
              <div class="input-group">
                <span class="input-group-btn">
                  <button class="btn btn-primary" id="rotate" type="button">Rotate</button>
                </span>
                <input class="form-control" id="rotateWith" type="number" value="45">
                <span class="input-group-addon">deg</span>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-6 col-md-6">
              <div class="input-group">
                <span class="input-group-btn">
                  <button class="btn btn-primary" id="replace" type="button">Replace</button>
                </span>
                <input class="form-control" id="replaceWith" type="text" value="img/picture-2.jpg" placeholder="Input image URL">
              </div>
            </div>
            <div class="col-sm-6 col-md-6">
              <div class="input-group">
                <span class="input-group-btn">
                  <button class="btn btn-primary" id="setAspectRatio" type="button">Set Aspect Ratio</button>
                </span>
                <input class="form-control" id="setAspectRatioWith" type="text" value="0.618" placeholder="Input aspect ratio">
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-6 col-md-6">
              <div class="input-group">
                <span class="input-group-btn">
                  <button class="btn btn-info" id="getData" type="button">Get Data</button>
                </span>
                <input class="form-control" id="getDataInto" type="text">
              </div>
            </div>
            <div class="col-sm-6 col-md-6">
              <div class="input-group">
                <span class="input-group-btn">
                  <button class="btn btn-info" id="getImageData" type="button">Get Image Data</button>
                </span>
                <input class="form-control" id="getImageDataInto" type="text">
              </div>
            </div>
          </div>

          <div class="row docs-data-url">
            <div class="col-sm-12">
              <button class="btn btn-primary" id="getDataURL" data-toggle="tooltip" type="button" title="$().cropper(&quot;getDataURL&quot;)">Get Data URL</button>
              <button class="btn btn-primary" id="getDataURL2" data-toggle="tooltip" type="button" title="$().cropper(&quot;getDataURL&quot;, &quot;image/jpeg&quot;)">Get Data URL (JPG)</button>
              <button class="btn btn-primary" id="getDataURL3" data-toggle="tooltip" type="button" title="$().cropper(&quot;getDataURL&quot;, {width: 160, height: 90})">Get Data URL (160*90)</button>
              <button class="btn btn-primary" id="getDataURL4" data-toggle="tooltip" type="button" title="$().cropper(&quot;getDataURL&quot;, {width: 320, height: 180}, &quot;image/jpeg&quot;, 0.8)">Get Data URL (320*180, JPG, 0.8)</button>
            </div>
            <div class="col-sm-6">
              <textarea class="form-control" id="dataURLInto" rows="8"></textarea>
            </div>
            <div class="col-sm-6">
              <div id="dataURLView"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <h3>Options:</h3>
        <form class="form-horizontal docs-options" role="form">
          <div class="form-group">
            <label class="col-xs-4 control-label">autoCrop:</label>
            <div class="col-xs-8">
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-primary active">
                  <input id="autoCrop1" name="autoCrop" type="radio" value="true" checked> Yes
                </label>
                <label class="btn btn-primary">
                  <input id="autoCrop2" name="autoCrop" type="radio" value="false"> No
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-4 control-label">dragCrop:</label>
            <div class="col-xs-8">
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-primary active">
                  <input id="dragCrop1" name="dragCrop" type="radio" value="true" checked> Yes
                </label>
                <label class="btn btn-primary">
                  <input id="dragCrop2" name="dragCrop" type="radio" value="false"> No
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-4 control-label">modal:</label>
            <div class="col-xs-8">
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-primary active">
                  <input id="modal1" name="modal" type="radio" value="true" checked> Yes
                </label>
                <label class="btn btn-primary">
                  <input id="modal2" name="modal" type="radio" value="false"> No
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-4 control-label">dashed:</label>
            <div class="col-xs-8">
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-primary active">
                  <input id="dashed1" name="dashed" type="radio" value="true" checked> Yes
                </label>
                <label class="btn btn-primary">
                  <input id="dashed2" name="dashed" type="radio" value="false"> No
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-4 control-label">movable:</label>
            <div class="col-xs-8">
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-primary active">
                  <input id="movable1" name="movable" type="radio" value="true" checked> Yes
                </label>
                <label class="btn btn-primary">
                  <input id="movable2" name="movable" type="radio" value="false"> No
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-4 control-label">resizable:</label>
            <div class="col-xs-8">
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-primary active">
                  <input id="resizable1" name="resizable" type="radio" value="true" checked> Yes
                </label>
                <label class="btn btn-primary">
                  <input id="resizable2" name="resizable" type="radio" value="false"> No
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-4 control-label">zoomable:</label>
            <div class="col-xs-8">
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-primary active">
                  <input id="zoomable1" name="zoomable" type="radio" value="true" checked> Yes
                </label>
                <label class="btn btn-primary">
                  <input id="zoomable2" name="zoomable" type="radio" value="false"> No
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-4 control-label">rotatable:</label>
            <div class="col-xs-8">
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-primary active">
                  <input id="rotatable1" name="rotatable" type="radio" value="true" checked> Yes
                </label>
                <label class="btn btn-primary">
                  <input id="rotatable2" name="rotatable" type="radio" value="false"> No
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-xs-4 control-label">multiple:</label>
            <div class="col-xs-8">
              <div class="btn-group" data-toggle="buttons">
                <label class="btn btn-primary">
                  <input id="multiple1" name="multiple" type="radio" value="true"> Yes
                </label>
                <label class="btn btn-primary active">
                  <input id="multiple2" name="multiple" type="radio" value="false" checked> No
                </label>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="sources">
      <h3>Sources:</h3>
      <p>HTML:</p>
      <pre class="prettyprint">...
&lt;div class=&quot;img-container&quot;&gt;
  &lt;img src=&quot;img/picture-1.jpg&quot;&gt;
&lt;/div&gt;
...
&lt;div class=&quot;img-preview&quot;&gt;&lt;/div&gt;
...</pre>
      <p>Javascript:</p>
      <pre class="prettyprint">var $image = $(&quot;.img-container img&quot;),
    $dataX = $(&quot;#dataX&quot;),
    $dataY = $(&quot;#dataY&quot;),
    $dataHeight = $(&quot;#dataHeight&quot;),
    $dataWidth = $(&quot;#dataWidth&quot;);

$image.cropper({
  aspectRatio: 16 / 9,
  data: {
    x: 480,
    y: 60,
    width: 640,
    height: 360
  },
  preview: &quot;.img-preview&quot;,
  done: function(data) {
    $dataX.val(Math.round(data.x));
    $dataY.val(Math.round(data.y));
    $dataHeight.val(Math.round(data.height));
    $dataWidth.val(Math.round(data.width));
  }
});

...

$(&quot;#reset&quot;).click(function() {
  $image.cropper(&quot;reset&quot;);
});

...</pre>
    </div>
  </div>

  <!-- Features -->
  <div class="container">
    <h1 id="features">Features</h1>
    <ul>
      <li>Supports touch</li>
      <li>Supports zoom</li>
      <li>Supports rotation</li>
      <li>Supports canvas</li>
      <li>Supports options</li>
      <li>Supports methods</li>
      <li>Supports events</li>
      <li>Cross-browser support</li>
    </ul>
  </div>

  <!-- Getting started -->
  <div class="container docs-getting-started">
    <h1 id="getting-started">Getting started</h1>
    <div class="row">
      <div class="col-md-9">
        <!-- Installation -->
        <h2 id="installation">Installation</h2>
        <p>Include files:</p>
        <pre class="prettyprint">&lt;script src=&quot;/path/to/jquery.js&quot;&gt;&lt;/script&gt;&lt;!-- jQuery is required --&gt;
&lt;link  href=&quot;/path/to/cropper.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;/path/to/cropper.js&quot;&gt;&lt;/script&gt;</pre>

        <!-- Usage -->
        <h2 id="usage">Usage</h2>
        <p>Initialize with <code>$.fn.cropper</code> method.</p>
        <p>HTML:</p>
        <pre class="prettyprint">&lt;!-- Wrap the image with a block element --&gt;
&lt;div class=&quot;container&quot;&gt;
  &lt;img src=&quot;picture.jpg&quot;&gt;
&lt;/div&gt;</pre>
        <p>Javascript:</p>
        <pre class="prettyprint">$(&quot;.container &gt; img&quot;).cropper({
  aspectRatio: 1.618,
  done: function(data) {
    // Output the result data for cropping image.
  }
});</pre>
        <div class="alert alert-warning">
          <p><strong>Notes:</strong></p>
          <p>- The size of the cropper inherits from the size of the image's parent element, so be sure to wrap the image with a visible block element.</p>
          <p>- The values of the result data was computed with the original size of the image, so you can use them to crop the image directly.</p>
        </div>

        <!-- Options -->
        <h2 id="options">Options</h2>
        <p>You may set cropper options with <code>$().cropper(options)</code>.</p>
        <p>If you want to change the global default options, You may use <code>$.fn.cropper.setDefaults(options)</code>.</p>
        <div class="table-responsive">
          <table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>aspectRatio</td>
                <td>string / number</td>
                <td><code>"auto"</code></td>
                <td>The aspect ratio of the cropping zone. <br>By default, the cropping zone is free ratio.</td>
              </tr>
              <tr>
                <td>data</td>
                <td>object</td>
                <td><code>{}</code></td>
                <td>Only supports four properties: "x", "y", "width" and "height". By default, the cropping zone will appear in the center of the image.</td>
              </tr>
              <tr>
                <td>done</td>
                <td>function</td>
                <td><code>function (data) {}</code></td>
                <td>This function will be executed when the cropping zone changes by a move, resize or crop.</td>
              </tr>
              <tr>
                <td>preview</td>
                <td>selector</td>
                <td><code>""</code></td>
                <td>A jquery selector, add extra elements for preview.</td>
              </tr>
              <tr>
                <td>multiple</td>
                <td>boolean</td>
                <td><code>false</code></td>
                <td>By default, the plugin only supports one cropper per page. If you intend to use more than one, just initialize them with this option set to <code>true</code>.</td>
              </tr>
              <tr>
                <td>modal</td>
                <td>boolean</td>
                <td><code>true</code></td>
                <td>Show (true) or hide (false) the black modal layer above the cropper.</td>
              </tr>
              <tr>
                <td>dashed</td>
                <td>boolean</td>
                <td><code>true</code></td>
                <td>Show (true) or hide (false) the dashed lines above the cropping zone.</td>
              </tr>
              <tr>
                <td>autoCrop</td>
                <td>boolean</td>
                <td><code>true</code></td>
                <td>Render the cropping zone automatically when initialize.</td>
              </tr>
              <tr>
                <td>autoCropArea</td>
                <td>number</td>
                <td><code>0.8</code></td>
                <td>A number between 0 and 1. Define the automatic cropping area size (percentage).</td>
              </tr>
              <tr>
                <td>dragCrop</td>
                <td>boolean</td>
                <td><code>true</code></td>
                <td>Enable to remove the current cropping zone and create a new one by dragging over the image.</td>
              </tr>
              <tr>
                <td>movable</td>
                <td>boolean</td>
                <td><code>true</code></td>
                <td>Enable to move the cropping zone.</td>
              </tr>
              <tr>
                <td>resizable</td>
                <td>boolean</td>
                <td><code>true</code></td>
                <td>Enable to resize the cropping zone.</td>
              </tr>
              <tr>
                <td>zoomable</td>
                <td>boolean</td>
                <td><code>true</code></td>
                <td>Enable to zoom the image.</td>
              </tr>
              <tr>
                <td>rotatable</td>
                <td>boolean</td>
                <td><code>true</code></td>
                <td>Enable to rotate the image.</td>
              </tr>
              <tr>
                <td>checkImageOrigin</td>
                <td>boolean</td>
                <td><code>true</code></td>
                <td>By default, the plugin will check the image origin, and if it is a cross-origin image, a "crossOrigin" attribute will be added to the image element to enable "rotate" and "getDataURL".</td>
              </tr>
              <tr>
                <td>minWidth</td>
                <td>number</td>
                <td><code>0</code></td>
                <td>The minimum width (px of original image) of the cropping zone. <br>Use this option only when you are sure that the image has this minimum width.</td>
              </tr>
              <tr>
                <td>minHeight</td>
                <td>number</td>
                <td><code>0</code></td>
                <td>The minimum height (px of original image) of the cropping zone. <br>Use this option only when you are sure that the image has this minimum height.</td>
              </tr>
              <tr>
                <td>maxWidth</td>
                <td>number</td>
                <td><code>Infinity</code></td>
                <td>The maximum width (px of original image) of the cropping zone. <br>Use this option only when you are sure that the image has this maximum width.</td>
              </tr>
              <tr>
                <td>maxHeight</td>
                <td>number</td>
                <td><code>Infinity</code></td>
                <td>The maximum height (px of original image) of the cropping zone. <br>Use this option only when you are sure that the image has this maximum height.</td>
              </tr>
              <tr>
                <td>minContainerWidth</td>
                <td>number</td>
                <td><code>300</code></td>
                <td>The minimum width of the cropper container.</td>
              </tr>
              <tr>
                <td>minContainerHeight</td>
                <td>number</td>
                <td><code>150</code></td>
                <td>The minimum height of the cropper container.</td>
              </tr>
              <tr>
                <td>build</td>
                <td>function</td>
                <td><code>null</code></td>
                <td>An event handler of the "build.cropper" event.</td>
              </tr>
              <tr>
                <td>built</td>
                <td>function</td>
                <td><code>null</code></td>
                <td>An event handler of the "built.cropper" event.</td>
              </tr>
              <tr>
                <td>dragstart</td>
                <td>function</td>
                <td><code>null</code></td>
                <td>An event handler of the "dragstart.cropper" event.</td>
              </tr>
              <tr>
                <td>dragmove</td>
                <td>function</td>
                <td><code>null</code></td>
                <td>An event handler of the "dragmove.cropper" event.</td>
              </tr>
              <tr>
                <td>dragend</td>
                <td>function</td>
                <td><code>null</code></td>
                <td>An event handler of the "dragend.cropper" event.</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Methods -->
        <h2 id="methods">Methods</h2>
        <h4>zoom</h4>
        <ul>
          <li>Zoom the image.</li>
          <li>Param: a number (positive number for zoom in, negative number for zoom out).</li>
          <li>Usage: <code>$().cropper("zoom", 0.1)</code> or <code>$().cropper("zoom", -0.1)</code></li>
        </ul>
        <h4>rotate</h4>
        <ul>
          <li>Rotate the image (Replace the original image with a new rotated image which was generated by canvas)</li>
          <li>Param: a number (positive number for rotate right, negative number for rotate left)..</li>
          <li>Usage: <code>$().cropper("rotate", 180)</code> or <code>$().cropper("rotate", -180)</code></li>
          <li>Note: Be sure the browser supports canvas before call this method.</li>
        </ul>
        <h4>enable</h4>
        <ul>
          <li>Enable (unfreeze) the cropper</li>
          <li>Usage: <code>$().cropper("enable")</code></li>
        </ul>
        <h4>disable</h4>
        <ul>
          <li>Disable (freeze) the cropper</li>
          <li>Usage: <code>$().cropper("disable")</code></li>
        </ul>
        <h4>reset</h4>
        <ul>
          <li>Reset the cropping zone to the start state.</li>
          <li>Add a <code>true</code> param to reset the cropping zone to the default state.</li>
          <li>Usage: <code>$().cropper("reset")</code> or <code>$().cropper("reset", true)</code></li>
        </ul>
        <h4>clear</h4>
        <ul>
          <li>Clear the cropping zone.</li>
          <li>Usage: <code>$().cropper("clear")</code>.</li>
        </ul>
        <h4>replace</h4>
        <ul>
          <li>Replace the image.</li>
          <li>Usage: <code>$().cropper("replace", "example.jpg")</code>.</li>
        </ul>
        <h4>destroy</h4>
        <ul>
          <li>Destroy the cropper and remove the instance from the image.</li>
          <li>Usage: <code>$().cropper("destroy")</code>.</li>
        </ul>
        <h4>getData</h4>
        <ul>
          <li>Get the cropped zone data. Add a <code>true</code> parameter to get rounded data.</li>
          <li>Usage: <code>$().cropper("getData")</code> or <code>$().cropper("getData", true)</code>.</li>
        </ul>
        <h4>setData</h4>
        <ul>
          <li>Reset the cropped zone with new data.</li>
          <li>Param: an object containing "x1", "y1", "width", "height".</li>
          <li>Usage: <code>$().cropper("setData", {width: 480, height: 270})</code>.</li>
          <li><strong>Tip</strong>: If you want to remove the current data, just pass an empty object or <code>null</code>. For example: <code>$().cropper("setData", {})</code> or <code>$().cropper("setData", null)</code>.</li>
        </ul>
        <h4>setAspectRatio</h4>
        <ul>
          <li>Enable to reset the aspect ratio after built.</li>
          <li>Param: "auto" or a positive number ("auto" for free ratio).</li>
          <li>Usage: <code>$().cropper("setAspectRatio", 1.618)</code>.</li>
        </ul>
        <h4>getImageData</h4>
        <ul>
          <li>Get an object containing image data, contains: "naturalWidth", "naturalHeight", "width", "height", "aspectRatio", "ratio" and "rotate".</li>
          <li>The "aspectRatio" is the value of "naturalWidth / naturalHeight".</li>
          <li>The "ratio" is the value of "width / naturalWidth".</li>
          <li>The "rotate" is the rotated degree of the current image.</li>
          <li>Usage: <code>$().cropper("getImageData")</code>.</li>
        </ul>
        <h4>setDragMode</h4>
        <ul>
          <li>Change the drag mode.</li>
          <li>Params: "crop", "move" and "none".</li>
          <li>Usage: <code>$().cropper("setDragMode", "crop")</code>.</li>
          <li><strong>Tips: </strong>You can toggle the "crop" and "move" mode by double click on the image.</li>
        </ul>
        <h4>getDataURL([options[, type[, quality]]])</h4>
        <ul>
          <li>Get the data url (base64 image) of the cropped zone.</li>
          <li>Param @options: A <code>Object</code> contains: "width", "height". Define the sizes of the result image.</li>
          <li>Param @type: A <code>String</code> indicating the image format. The default type is image/png. Other types: "image/jpeg", "image/webp".</li>
          <li>Param @quality: A <code>Number</code> between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp.</li>
          <li>Usage: <code>$().cropper("getDataURL")</code> or <code>$().cropper("getDataURL", {width:100, height: 100}, "image/jpeg", 0.6)</code> or <code>$().cropper("getDataURL", "image/jpeg")</code> or <code>$().cropper("getDataURL", "image/jpeg", 0.6)</code>.</li>
          <li><strong>Note: </strong>Be sure the browser supports canvas before call this method.</li>
        </ul>

        <!-- Events -->
        <h2 id="events">Events</h2>
        <h4>build.cropper</h4>
        <p>This event will be fired when the Cropper starts to build.</p>
        <h4>built.cropper</h4>
        <p>This event will be fired when the Cropper has been built.</p>
        <h4>dragstart.cropper</h4>
        <p>This event will be fired before the cropping zone start to move.</p>
        <h4>dragmove.cropper</h4>
        <p>This event will be fired when the cropping zone was moving.</p>
        <h4>dragend.cropper</h4>
        <p>This event will be fired after the cropping zone stop to move.</p>
      </div>
      <div class="col-md-3">
        <div class="hidden-print docs-sidebar" role="complementary">
          <ul class="nav">
            <li><a href="#installation">Installation</a></li>
            <li><a href="#usage">Usage</a></li>
            <li><a href="#options">Options</a></li>
            <li><a href="#methods">Methods</a></li>
            <li><a href="#events">Events</a></li>
          </ul>
          <a class="btn btn-link back-to-top" href="#top">Back to top</a>
        </div>
      </div>
    </div>
  </div>

  <!-- Examples -->
  <div class="container docs-examples">
    <h1 id="examples">Examples</h1>
    <h3>Cropper with fixed dragger.</h3>
    <div class="row">
      <div class="col-sm-7">
        <p>Demo:</p>
        <div class="fixed-dragger-cropper">
          <img src="img/picture-1.jpg" alt="Picture">
        </div>
      </div>
      <div class="col-sm-5">
        <p>HTML:</p>
        <pre class="prettyprint">&lt;div class=&quot;fixed-dragger-cropper&quot;&gt;
  &lt;img src=&quot;img/picture-1.jpg&quot;&gt;
&lt;/div&gt;</pre>
        <p>JavaScript:</p>
        <pre class="prettyprint">$(&quot;.fixed-dragger-cropper &gt; img&quot;).cropper({
  aspectRatio: 640 / 320,
  autoCropArea: 0.6, // Center 60%
  multiple: false,
  dragCrop: false,
  dashed: false,
  movable: false,
  resizable: false,
  built: function () {
    $(this).cropper(&quot;zoom&quot;, 0.5);
  }
});</pre>
      </div>
    </div>

    <br>

    <h3>Cropper in a Bootstrap modal</h3>
    <div class="row">
      <div class="col-sm-6">
        <p>HTML:</p>
        <pre class="prettyprint">&lt;div class=&quot;modal&quot; id=&quot;bootstrap-modal&quot;&gt;
  &lt;div class=&quot;modal-dialog&quot;&gt;
    ...
    &lt;div class=&quot;modal-body&quot;&gt;
      &lt;div class=&quot;bootstrap-modal-cropper&quot;&gt;
        &lt;img src=&quot;img/picture-1.jpg&quot;&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</pre>

        <p>Demo:</p>
        <p><button class="btn btn-primary" data-target="#bootstrap-modal" data-toggle="modal" type="button">Launch the demo</button></p>
        <div class="modal fade" id="bootstrap-modal" aria-hidden="true" aria-labelledby="bootstrap-modal-label" role="dialog" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="bootstrap-modal-label">Cropper</h4>
              </div>
              <div class="modal-body">
                <div class="bootstrap-modal-cropper"><img src="img/picture-1.jpg" alt="Picture"></div>
              </div>
              <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <p>JavaScript:</p>
        <pre class="prettyprint">var $image = $(&quot;.bootstrap-modal-cropper &gt; img&quot;),
    originalData = {};

$(&quot;#bootstrap-modal&quot;).on(&quot;shown.bs.modal&quot;, function() {
  $image.cropper({
    multiple: true,
    data: originalData,
    done: function(data) {
      console.log(data);
    }
  });
}).on(&quot;hidden.bs.modal&quot;, function() {
  originalData = $image.cropper(&quot;getData&quot;);
  $image.cropper(&quot;destroy&quot;);
});
</pre>
      </div>
    </div>

    <br>

    <h3>Crop avatar <small>A complete example</small></h3>
    <p>This example require a <strong>PHP</strong> server, please download and test it.</p>
    <p>
      <a class="btn btn-primary" href="https://github.com/fengyuanchen/cropper/archive/master.zip">Download</a>
      <a class="btn btn-primary" href="https://github.com/fengyuanchen/cropper/tree/master/examples/crop-avatar">View the sources</a>
    </p>
  </div>

  <!-- footer -->
  <footer class="docs-footer">
    <div class="container clearfix">
      <div class="btn-group pull-left">
        <a class="btn btn-link" href="https://github.com/fengyuanchen/cropper/">GitHub</a>
        <a class="btn btn-link" href="https://github.com/fengyuanchen/cropper/blob/master/LICENSE">License</a>
      </div>
      <div class="btn-group pull-right">
        <a class="btn btn-link" href="#top" title="Back to top">Back to top</a>
      </div>
    </div>
  </footer>

  <!-- Alert -->
  <div class="docs-alert"><span class="warning message"></span></div>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  <script src="https://fengyuanchen.github.io/js/common.js"></script>
  <script src="js/cropper.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>
